<template>
	<div id="manageGoods">
		<!--<haders title="商品管理"></haders>-->
		<scroller ref="scroller" :on-infinite="infinite"   >
			<div class="mian">
				<div class="search">
					<div class="select_input">
						<input class="effect-20" type="text" placeholder="请输入搜索内容"  v-model="seek"/>
						<span class="focus-border">
			            	<i></i>
			            </span>
					</div>
					
					<button @click="soso()" class="iconfont icon-sousu-"> 搜索</button>
				</div>
				<div class="goodsContent">
					<ul class="oul" v-for="item in items">
						<i><img :src="item.GoodsImg" alt="加载失败" :onerror="imgError"/></i>
						<dl>
							<dd>{{item.GoodsName}}</dd>
							<dd><span>售价:</span>
								<font>￥{{item.Price}}-￥{{item.CloudPrice}}</font>
							</dd>
							<dd><span>价差:</span>
								<font>￥{{item.newprice}}</font>
							</dd>
							<dd><span>库存:</span>
								<font>{{item.StockCount}}</font>
							</dd>
							<dd><span>状态:</span>
								<font v-if="item.GoodsStatus==1">上架</font>
								<font v-else >下架</font>
							</dd>
						</dl>
						<p>
							<!--<share></share> @click="getstare(item)"-->
							<a @click="getAdders(item.GoodsId)" class="icon-pingjia1 iconfont"> 编辑</a>
							<a :href="'/merchant/goodsCode/'+item.GoodsId+'/'+item.ShopId"  class="icon-fenxiang iconfont"  > 分享</a>
						</p>
					</ul>
				</div>
				<p class="cons">总计<font class="c-red">{{length}}</font>件商品</p>

			</div>
		</scroller>

		<footer>
			<a @click="spellslist()">发布商品</a>
		</footer>

	</div>
</template>
<script>
	import { Toast } from 'mint-ui';
	 import { Indicator } from 'mint-ui';
	export default {
		name: 'manageGoods',
		components: {
			 
		},
		data() {
			return {
				seek:'',//搜索关键词
				indexPage:1,
				 items:[],
				 length:'',//搜索数量
				 done:''
			}
		},
		created(){
			this.imgError=this.$store.state.imgError;
		},
		mounted() { 
		},
		methods: {
			infinite(done){ 
				this.done=done;
				Indicator.open({text: '加载中...'});
				this.$http.get("/ManagerGroupBuy/GetManageGoodsList", {
					params: {
						"searchStr":this.seek,
						"page": this.indexPage
					}
				}).then((res) => {  
					 console.log(res)
					if(res.data.data.List=="") { 
						done(true);
					}else{ 
						if(this.indexPage <= res.data.data.TotalPage) {
							this.indexPage++;
							this.items = this.items.concat(res.data.data.List);
							this.items.forEach(function(item){
								item.newprice=(item.Price-item.CloudPrice).toFixed(2)
							}) 
							this.length=res.data.data.List.length;
							setTimeout(function() {
								done()
							}, 3000)
						} else {
							done(true)
						}
					}
					Indicator.close();
				}).catch((err) => {
					console.log(err)
				});
			},
			soso(){
				this.items=[]; 
				this.indexPage=1;
				this.infinite(this.done);
				this.length=this.items.length;
			},
			spellslist(item){ 
				this.$router.push({path:'/merchant/redactGoods'}) 
			},
			//获取ID
			getAdders(item){
				this.$router.push({path:'/merchant/redactGoods/'+item})  
			},
			//分享商品
			getstare(item){ 
				this.$router.push({path:'/merchant/goodsCode/'+item.GoodsId+'/'+item.ShopId})  
			}
		}
	}
</script>
<style scoped>
	.decora {
		padding-top: 1.333333rem;
		padding-bottom: 1rem;
	}
	
	footer {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 100;
		height: 1.3rem;
		line-height: 1.4rem;
	}
	
	footer a {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 0.453333rem;
		color: #fff;
		font-weight: 500;
		border-top-left-radius: 0.066666rem;
		border-top-right-radius: 0.066666rem;
		background-color: #6530E0;
	}
	
	.search {
		width: 100%;
		height: 1.5rem;
		background-color: #fff;
		padding: 0.2rem 0.3rem; 
		border-bottom: 1px solid #CCCCCC;
		   
	}
	
	.search .select_input{
		width: 75%;
		border-radius: 0.066666rem; 
		float: left;
		font-size: 0.373333rem;
		position: relative;
	}
	
	.select_input input{
		width: 100%;
		height: 1rem;   
		font-size: 0.373333rem;
		text-indent: 0.3rem;
		outline: none;
		border: 1px solid #ccc;
		transition: 0.4s;
	}
	
	.search button {
		width: 25%;
		background: linear-gradient(-92deg,#8900e0 0%, #1896e0 180%);
		color: #fff;
		height: 1rem;
		font-size: 0.4rem;
		float: left;
	}
	
	.goodsContent {
		width: 100%;
	}
	
	.goodsContent .oul {
		width: 100%;
		background-color: #fff;
		padding: 0.2rem 0.3rem;
		border-bottom: 1px solid #CCCCCC;
		overflow: hidden;
		position: relative;
	}
	
	.goodsContent .oul i {
		display: inline-block;
		width: 30%;
		float: left;
	}
	
	.goodsContent .oul i img {
		width: 100%;
	}
	
	.goodsContent .oul dl {
		width: 67%;
		margin-left: 3%;
		float: left;
		font-size: 0.346666rem;
		color: #333333;
	}
	
	.goodsContent .oul dl span {
		margin-right: 0.2rem;
	}
	
	.goodsContent .oul dl dd {
		margin-bottom: 0.2rem;
	}
	
	.goodsContent .oul p {
		position: absolute;
		bottom: 0;
		right: 0.3rem;
		width: 100%;
		height: 1rem;
		text-align: right;
	}
	
	.goodsContent .oul p a {
		display: inline-block;
		padding: 0.1rem 0.3rem; 
		color: #fff;
		font-size: 0.373333rem; 
		margin-left: 0.4rem;
		background: linear-gradient(-92deg,#8900e0 0%, #1896e0 180%);
		box-shadow: 0.1rem 0.1rem 0.1rem 1px #ccc; 
		border-radius:0.5rem;
	}
	.cons{
		background-color: #fff;
		font-size: 0.373333rem;
		text-align: center;
		padding:0.2rem;
	}
	

.effect-20 ~ .focus-border:before,
.effect-20 ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.3s;}
.effect-20 ~ .focus-border:after{top: auto; bottom: 0; left: auto; right: 0;}
.effect-20 ~ .focus-border i:before,
.effect-20 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; transition: 0.4s;}
.effect-20 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0;}
.effect-20:focus ~ .focus-border:before,
.effect-20:focus ~ .focus-border:after,
.has-content.effect-20 ~ .focus-border:before,
.has-content.effect-20 ~ .focus-border:after{width: 100%; transition: 0.3s;}
.effect-20:focus ~ .focus-border i:before,
.effect-20:focus ~ .focus-border i:after,
.has-content.effect-20 ~ .focus-border i:before,
.has-content.effect-20 ~ .focus-border i:after{height: 100%; transition: 0.4s;}
.effect-20 ~ label{position: absolute; left: 14px; width: 100%; top: 10px; color: #aaa; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
.effect-20:focus ~ label, .has-content.effect-20 ~ label{top: -18px; left: 0; font-size: 12px; color: #3399FF; transition: 0.3s;}
	
</style>